<!--
<template>
    <div class="largeScreen">
        <div class="my-header">
            <top-header :title="form.title"/>
        </div>
        <div class="my-main">
            <div class="my-left">
                <div class="my-left-top">
                    <div class="my-left-top-top">
                        <ProgressBar/>
                    </div>
                    <div class="my-left-top-bottom">
                        <BarGraph/>
                    </div>
                </div>

                <div class="my-left-center">
&lt;!&ndash;                   <ScrollBoard/>&ndash;&gt;
                </div>

                <div class="my-left-bottom">
&lt;!&ndash;                    <ScatterDiagram/>&ndash;&gt;
                </div>
            </div>

            <div class="my-center">
                <div class="my-center-top">
                    <DigitalFlop/>
                </div>

                <div class="my-center-bottom">
                    地图
                </div>
            </div>

            <div class="my-right">
                <div class="my-right-top">
                    <MyCarousel/>
                </div>

                <div class="my-right-center">
                    <BrokenLine/>
                </div>

                <div class="my-right-bottom">
                    <DataMart/>
                </div>
            </div>
        </div>

    </div>
</template>

<script>

// 大屏
import ScaleBox from "@/views/components/scaleBox/SacleBox.vue";
import TopHeader from "@/views/components/dataView/topHeader.vue";
import BarGraph from "@/views/components/dataView/BarGraph.vue";
import DigitalFlop from "@/views/components/dataView/DigitalFlop.vue";
import BrokenLine from "@/views/components/dataView/BrokenLine.vue";
import DataMart from "@/views/components/dataView/DataMart.vue";
import MyCarousel from "@/views/components/dataView/MyCarousel.vue";
import ProgressBar from "@/views/components/dataView/ProgressBar.vue";
import ScrollBoard from "@/views/components/dataView/MyScrollBoard.vue";
import ScatterDiagram from "@/views/components/dataView/ScatterDiagram.vue";

export default {
    name: 'MyLargeScreen',
    components: {
        ScatterDiagram,
        ScrollBoard, ProgressBar, MyCarousel, DataMart, BrokenLine, DigitalFlop, BarGraph, TopHeader, ScaleBox},
    data() {
        return {
            form: {
                title: '松江区智慧康养服务'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.largeScreen {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    color: #fff;
    background-color: #030409;
    box-sizing: border-box;
    background-image: url('/img/bg.png');

    .my-header {
        height: 6%;
        box-sizing: border-box;
    }

    .my-main {
        display: flex;
        width: 100%;
        height: 94%;
        box-sizing: border-box;

        .my-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
            box-sizing: border-box;

            .my-left-top {
                flex: 1;
                display: flex;
                flex-direction: column;
                height: 100%;
                box-sizing: border-box;

                .my-left-top-top {
                    flex: 1;
                }

                .my-left-top-bottom {
                    flex: 5;
                }


            }

            .my-left-center {
                flex: 1;
            }

            .my-left-bottom {
                flex: 1;
            }


        }

        .my-center {
            flex: 2;
            display: flex;
            flex-direction: column;
            height: 100%;
            box-sizing: border-box;
            border: 1px solid aquamarine;

            .my-center-top {
                flex: 1;
            }

            .my-center-bottom {
                flex: 6;
            }

        }

        .my-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
            box-sizing: border-box;

            .my-right-top {
                flex: 1;

            }

            .my-right-center {
                flex: 1;
            }

            .my-right-bottom {
                flex: 1;
            }

        }
    }

}
</style>
-->
